<!doctype html>
<html>		
		<head>
			<meta charset="utf-8">
			<script src="js/angular.min.js"></script>
		</head>
		<body ng-app>
			<div ng-controller="HelloAngular">
			<input ng-model='user.name'> <hr/>
				Hello, {{user.name}} <br/>
				  span ng:bind="user.name" | <span ng:bind="user.name"></span> <br/>
			      span ng_bind="user.name" | <span ng_bind="user.name"></span> <br/>
			      span ng-bind="user.name" | <span ng-bind="user.name"></span> <br/>
			      span data-ng-bind="user.name" | <span data-ng-bind="user.name"></span> <br/>
			      span x-ng-bind="user.name" | <span x-ng-bind="user.name"></span> <br/>
			</div>
			<br/>
			Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
			Click me2: <input type="checkbox" ng-model="checked2" ng-init="checked2=true" /><br/>
			Show when checked:
			<span ng-if="checked">
			  I'm removed when the checkbox is unchecked.
			</span>
			<br/>
			Show when checked:
			<span ng-if="checked && checked2">
			  I'm removed when the checkbox or checkbox2 is unchecked.
			</span>
		</body>

		<script type="text/javascript">
		function HelloAngular($scope) {
			$scope.user = {
				name: 'Angular'
			};
		}
		</script>
</html>
